<template>
  <div class="user">
    <NavBar></NavBar>
    <div class="content">
      <div class="card">
        <el-dialog
          v-model="editUserShowView"
          :title="'更新个人信息'"
          width="30%"
        >
          <div class="m-b-10 t-a-l">昵称：</div>
          <div class="m-b-10">
            <el-input v-model="editNickname" placeholder="请输入你的昵称" />
          </div>
          <div class="m-b-10 t-a-l">个人简介：</div>
          <div class="m-b-10">
            <el-input
              :rows="5"
              type="textarea"
              :placeholder="'介绍一下自己吧(50字以内)'"
              v-model="editSignature"
              @click="checkLogin"
            >
            </el-input>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="editUserInfo()">更新</el-button>
              <el-button @click="editUserShowView = false"> 取消 </el-button>
            </span>
          </template>
        </el-dialog>
        <el-row>
          <el-col :span="8" class="card-header-father">
            <div class="card-header">
              <div class="avatar">
                <el-avatar
                  shape="circle"
                  :size="88"
                  :src="
                    user.avatar
                      ? user.avatar
                      : require('../assets/default_avatar.png')
                  "
                />
              </div>
              <div class="name">
                {{ user.nickname ? user.nickname : "未登录" }}
              </div>
              <div class="btns" v-if="user.id !== ''">
                <el-button type="primary" v-if="user.id !== currentUserId"
                  >关注</el-button
                >
                <el-button type="primary" plain @click="showEditUserInfo"
                  >编辑</el-button
                >
              </div>
            </div></el-col
          >
          <el-col :span="16">
            <div class="userInfo">
              <p>
                <span class="fw-b">注册日期：</span
                ><span>{{ user.createAt }}</span>
              </p>

              <p>
                <span class="fw-b">上次登录时间：</span
                ><span>{{ user.lastLoginTime }}</span>
              </p>
            </div>
            <div class="userInfo">
              <p class="fw-b">个人简介：</p>
              <p>{{ user.signature }}</p>
            </div></el-col
          >
        </el-row>
      </div>

      <div class="left">
        <div class="tag">
          <el-tabs
            v-model="activeId"
            class="demo-tabs"
            @tab-click="handleClick"
            @tab-change="changeTab"
          >
            <el-tab-pane label="文章" name="ARTICLE"></el-tab-pane>
            <el-tab-pane label="问答" name="FAQ"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="article">
          <div v-for="item in articles" :key="item.id" class="items">
            <div class="item" @click="toDetails(item.id, item.category)">
              <div class="title">{{ item.title }}</div>
              <div class="main">{{ item.markdownContent }}</div>
              <div class="footer">
                <span>
                  <img
                    style="width: 1em"
                    :src="item.avatar"
                    alt="云客栈"
                  />&nbsp;{{ item.nickname }}
                </span>
                <span class="time">
                  <el-icon><Clock /></el-icon> {{ item.createAt }}
                </span>
                <span class="view"
                  ><el-icon><View /></el-icon> {{ item.views }}</span
                >
                <span class="like"
                  ><el-icon><Star /></el-icon>{{ item.approvals }}</span
                >
                <span class="comments"
                  ><el-icon><ChatRound /></el-icon>{{ item.comments }}
                </span>
                <span class="tags"
                  ><ul>
                    <li v-for="o in item.tags" :key="o.id">
                      <el-icon><PriceTag /></el-icon>{{ o.name }}&nbsp;
                    </li>
                  </ul></span
                >
              </div>
            </div>
          </div>
        </div>

        <el-divider />

        <div class="page">
          <el-pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalNum"
            :page-sizes="[1, 2, 5, 10, 20, 30, 40, 50, 100]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            layout="prev, pager, next"
          />
        </div>
      </div>
      <!-- <div class="right">
        <Btn></Btn>
        <RecentQuestion></RecentQuestion>
        <CommonTags></CommonTags>
      </div> -->
    </div>
  </div>
</template>
  
<script>
import { ElNotification } from "element-plus";
import NavBar from "@/components/NavBar.vue";
// import CommonTags from "@/components/CommonTags.vue";
// import RecentQuestion from "@/components/RecentQuestion.vue";
import { $getUser, $getArticleByUser, $editUserInfo } from "../api/user";
import { useUser } from "../store";

export default {
  data() {
    return {
      editUserShowView: false,

      activeId: 1,
      currentUserId: "",

      user: {
        id: "",
        username: "",
        nickname: "",
        sex: "",
        avatar: "",
        signature: "",
        ext: "",
        lastLoginTime: "",
        createAt: "",
        updateAt: "",
      },

      editNickname: "",
      editSignature: "",

      pageSize: 5,
      currentPage: 1,
      totalNum: 100,
      articles: [],
      catagory: "ARTICLE",
    };
  },
  mounted() {
    this.getUser();
    this.handleCurrentChange(1);
  },
  methods: {
    async getUser() {
      let userStore = useUser();
      let u = userStore.$state.user;
      this.currentUserId = u.userId;
      if (u.userId !== "") {
        let { data } = await $getUser(u);
        this.user = data;

        this.editNickname = data.nickname;
        this.editSignature = data.signature;
      }
    },

    async handleCurrentChange(id) {
      // val: number
      console.log(`current page: ${id}`);
      let userStore = useUser();
      let u = userStore.$state.user;
      if (u.userId !== null) {
        let { data } = await $getArticleByUser({
          page: id,
          pageSize: this.pageSize,
          userId: u.userId,
          category: this.catagory,
        });
        this.articles = data.records;
        this.currentPage = id;
        this.totalNum = data.total;
      }
    },
    changeTab(val) {
      console.log("切换标签" + val);
      this.catagory = val;
      this.handleCurrentChange(1);
    },
    toDetails(id, category) {
      this.$router.push({
        path: "/detail",
        query: { category: category, id: id },
      });
    },
    showEditUserInfo() {
      this.editUserShowView = true;
    },
    async editUserInfo() {
      let { data, code } = await $editUserInfo({
        nickname: this.editNickname,
        signature: this.editSignature,
      });
      if (code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });

        this.editUserShowView = false;
        this.getUser();
      }
    },
  },

  components: {
    NavBar,
    // CommonTags,
    // RecentQuestion,
  },
};
</script>
  
<style lang="less" scoped>
.user {
  /* height: 800px; */
  background-color: #f3f3f2;
  .content {
    width: 1200px;
    height: 100vh;
    margin: 0 auto;
    padding: 25px;
    .card {
      width: 1210px;
      height: 180px;
      margin: 25px auto;
      padding: 15px;
      background-color: #fff;
      .card-header-father {
        .card-header {
          border-right: 1px solid #b7b5b5;
        }
      }

      .avatar {
        margin-bottom: 10px;
      }
      .name {
        margin-bottom: 10px;
      }
      .userInfo {
        height: 40px;
        padding-top: 20px;
        padding-left: 20px;
        p {
          margin-left: 20px;
          display: inline-block;
          float: left;
        }
      }
    }

    .left {
      width: 1240px;
      height: auto;
      float: left;
      background-color: #ffffff;
      .tag {
        padding: 20px;
        .demo-tabs {
          font-size: 25px;
        }
      }
      .article {
        .item {
          padding: 10px 25px;
          text-align: left;
          .title {
            font-size: large;
            font-weight: bolder;
          }
          .main {
            margin-top: 8px;
            font-size: smaller;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .footer {
            margin-top: 8px;
            font-size: smaller;
            color: #b7b5b5;
            span:nth-child(n + 2) {
              margin-left: 35px;
            }
            .tags {
              ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: inline;
                li {
                  display: inline;
                }
              }
            }
          }
        }
      }
      .page {
        padding: 10px;
      }
    }
    .right {
      width: 300px;
      float: right;
      height: 400px;
    }
  }
}
</style>

<style>
.user:after {
  content: "";
  display: block;
  clear: both;
}
.m-b-10 {
  margin-bottom: 10px;
}
.t-a-l {
  text-align: left;
}
.fw-b {
  font-weight: bold;
}
</style>
  